<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<title>translate eng to kor</title>
<script>
	var fromEnc = "ko";
	var toEnc = "en";
	
</script>
</head>
<body style="width:100%; height:100%;">
	<table style="width:100%; height:100%;">
		<tr>
			<td colspan="2"><span><b>이 페이지는 영어 → 일본어 → 한국어로 번역해주는 사이트입니다. <br/>서버랑 도메인 유지보수료를 위해서 밑에 광고를 달았습니다. 죄송합니다. </b></span></td>
		</tr>
		<tr>
			<td colspan="2"><div>Translate&nbsp;&nbsp;:&nbsp;&nbsp;<button id="trans">Translate</button></div></td>
		</tr>
		<tr>
			<td>
				<div id="radiogroup1">
				  <input id="radio1" name="radio1" type="radio" /><label for="radio1">English</label>
				  <input id="radio2" name="radio1" type="radio" /><label for="radio2">Korean</label>
				</div>
			</td>
			<td>
				<div id="radiogroup2">
				  <input id="radio3" name="radio3" type="radio" /><label for="radio3">English</label>
				  <input id="radio4" name="radio3" type="radio" /><label for="radio4">Korean</label>
				</div>
			</td>
		</tr>  
		<tr>
			<td>
				<textarea style="width:100%; height:300px; padding:2px; border:2px" id="sln"></textarea>
			</td>
			<td>
				<textarea style="width:100%; height:300px; padding:2px; border:2px" id="tln" ></textarea>
			</td>
		</tr>
	</table>
</body>
<script>
	function changeRadio(){
		if(fromEnc == 'ko'){
			$('#radio1').attr('checked',  false);
			$('#radio2').attr('checked',  true);
		}else{
			$('#radio1').attr('checked',  true);
			$('#radio2').attr('checked',  false);
		}
		if(toEnc == 'ko'){
			$('#radio3').attr('checked',  false);
			$('#radio4').attr('checked',  true);
		}else{
			$('#radio3').attr('checked',  true);
			$('#radio4').attr('checked',  false);
		}
		//alert($('#radio1').is(':checked') + '=' + $('#radio2').is(':checked') + '=' + $('#radio3').is(':checked') + '=' + $('#radio4').is(':checked'));
	}
	changeRadio();
	
	$('#radio1').click(function(){
		fromEnc = 'en';
		changeRadio();
	});
	$('#radio2').click(function(){
		fromEnc = 'ko';
		changeRadio();
	});
	$('#radio3').click(function(){
		toEnc = 'en';
		changeRadio();
	});
	$('#radio4').click(function(){
		toEnc = 'ko';
		changeRadio();
	});
	
	
</script>

<script>
  $("#tln").prop("disabled", true);
  
	$('#trans').click(function() {
		var sln = $('#sln').val();
		
		$.ajax({
		    url: '<%=request.getContextPath()%>/translate',
		    dataType: 'text',
		    type : 'post',
		    data : {
		    	'fromEnc' : fromEnc,
		    	'toEnc' : toEnc,
		    	'sln': sln
		    },
		    success: function( data ) {
		      $('#tln').val(data);
		    },
		    error: function( data ) {
				
		    }
		  });
			
	});
	
	
	function fixedEncodeURIComponent (str) {
		  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
		}
</script>
<script>


</script>
<table>
<tr><td>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-8638613247413657";
/* tranlate.pizzastudio.org */
google_ad_slot = "5078380926";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td></tr></table>
</html>